<template>
    <div class="user-detail">
      <div style="background: #fff; padding: 0 32px">
        <!-- 面包屑 -->
        <div style="padding: 17px 0 19px">
          <a-breadcrumb>
            <a-breadcrumb-item>商品</a-breadcrumb-item>
            <a-breadcrumb-item>
              <!-- <a href="javascipt:;" @click="$router.push({ name: 'UserManagement' })">用户管理</a> -->
            </a-breadcrumb-item>
            <a-breadcrumb-item>用户详情</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
  
        <!-- 用户信息 -->
        <div class="flex-x-sb" style="margin-bottom: 19px">
          <div class="flex-y-center">
            <img :src="userData.avatar" style="width: 28px; height: 28px" alt="" />
            <span style="margin-left: 16px; font-weight: 600; font-size: 20px">{{ userData.name }}</span>
          </div>
          <div>
            <!-- <a-button @click="onModify" style="margin-left: 9px">编辑用户</a-button> -->
            <a-button @click="modifyPrice" type="primary" style="margin-left: 9px">设置联盟券</a-button>
            <!-- <a-button :loading="exporting" @click="exportJf" type="primary" style="margin-left: 9px">导出积分记录</a-button> -->
          </div>
        </div>
  
        <!-- 用户信息 -->
        <div>
          <a-row>
            <a-col :span="11">
              <a-col :span="12">

                <div style="line-height: 30px">
                  <span style="width: 70px; display: inline-block">手机号码:</span>{{ userData.mobile }}
                </div>

              </a-col>

            </a-col>
  
            <a-col :span="13">
              <div class="price-box">
                <div>
                  <div>联盟券</div>
                  <div>￥ {{ userData.league_price }}</div>
                </div>

              </div>
            </a-col>
          </a-row>
        </div>
  
        <!-- tabs -->
        <div class="tabs">
          <span @click="clickTab(2)" :class="tabIndex == 2 ? 'select' : ''">联盟券记录</span>
        </div>
      </div>
  
      <div class="table-box">
        <!-- 积分 -->
        <STable v-if="tabIndex == 1" ref="table" rowKey="id" :columns="integralColumns" :data="loadData" key="1">
          <span slot="type" slot-scope="text, item">
            <span v-if="parseFloat(item.after) < parseFloat(item.before)">支出</span>
            <span v-else>收入</span>
          </span>
          <!-- 时间设置 -->
          <span slot="created_at" slot-scope="text">
            {{ (text * 1000) | moment }}
          </span>
        </STable>
        <!-- 余额 -->
        <STable v-else-if="tabIndex == 2" ref="table" rowKey="id" :columns="balanceColumns" :data="loadData" key="1">
          <span slot="type" slot-scope="text, item">
            <span v-if="parseFloat(item.after) < parseFloat(item.before)">支出</span>
            <span v-else>收入</span>
          </span>
          <!-- 时间设置 -->
          <span slot="created_at" slot-scope="text, item">
            {{ (text * 1000) | moment }}
          </span>
        </STable>
        <STable v-else-if="tabIndex == 3" ref="table" rowKey="id" :columns="memberCOlumns" :data="loadData" key="2">
          <!-- <span slot="nickname" slot-scope="text, scope">
            <span>{{ text }} {{ scope }}</span>
          </span> -->
        </STable>
      </div>
  
      <!-- 编辑用户-->
      <a-modal
        title="编辑用户"
        :width="650"
        :confirm-loading="modalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        v-model="modifyShow"
        @ok="modalSumit"
      >
        <el-form ref="modifyForm" label-width="100px" label-suffix="：" :form="modalData" size="small">
          <el-form-item label="用户名">
            <el-input disabled v-model="modalData.nickname" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="上级">
            <SelectUer
              @userInfo="getInfo"
              dataType="single"
              returnType="id"
              selectType="user"
              :defaultUser="modalData.parent_id"
            >
            </SelectUer>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-select style="width: 100%" v-model="modalData.level" placeholder="">
              <el-option v-for="item in levelList" :key="item.level" :label="item.name" :value="item.level"></el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="核销员">
            <a-radio-group v-model="modalData.is_saas_clerk">
              <a-radio value="0">否</a-radio>
              <a-radio value="1">是</a-radio>
            </a-radio-group>
          </el-form-item>
          <el-form-item label="加入黑名单">
            <a-radio-group v-model="modalData.blacklist">
              <a-radio value="0">关闭</a-radio>
              <a-radio value="1">开启</a-radio>
            </a-radio-group>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="modalData.contact_way" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="累计佣金">
            <el-input v-model="modalData.total_price" disabled placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="可提现佣金">
            <el-input v-model="modalData.price" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="modalData.comments" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </a-modal>
      <a-modal
        title="设置联盟券"
        :width="500"
        :confirm-loading="modalLoading"
        :mask-closable="false"
        :destroy-on-close="true"
        v-model="rechargeVisible"
        @ok="updateUserRecharge"
      >
        <el-form size="small" label-suffix="：" label-width="100px">
          <!-- <el-form-item label="操作选项">
            <el-select style="width: 100%" v-model="priceForm.type" placeholder="请选择操作项" >
              <el-option label="联盟券" :value="1"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="操作选项">
            <a-radio-group v-model="priceForm.recharge_type">
              <a-radio :value="1">充值</a-radio>
              <a-radio :value="2">扣除</a-radio>
            </a-radio-group>
          </el-form-item>
          <el-form-item label="数额">
            <el-input v-if="priceForm.type == 1" v-model="priceForm.integral" type="number" placeholder=""></el-input>
            <el-input v-else v-model="priceForm.money" type="number" placeholder=""></el-input>
          </el-form-item>
          <!-- <el-form-item label="说明">
            <el-input type="textarea" v-model="priceForm.explain" placeholder=""></el-input>
          </el-form-item> -->
        </el-form>
      </a-modal>
    </div>
  </template>
  
  <script>
  import { STable } from '@/components'
  import { updateUserInfo, getUserList } from '@/api/user'
  import { getRechargeList, userLeague, expRechargeList,getLeagueList } from '@/api/recharge'
  import SelectUer from '@/components/SelectUser/SelectUser1'
  // 会员table规则
  const memberCOlumns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '订单号',
      dataIndex: 'order_no'
    },
    {
      title: '昵称',
      dataIndex: 'nickname'
    },
    {
      title: '支付金额',
      dataIndex: 'pay_price',
      sorter: (a, b) => a.pay_price - b.pay_price
    },
    {
      title: '购买前',
      dataIndex: 'current_name'
    },
    {
      title: '购买后',
      dataIndex: 'after_name'
    },
    {
      title: '支付日期',
      dataIndex: 'pay_time',
      sorter: (a, b) => new Date(a.pay_time).getTime() - new Date(b.pay_time).getTime()
    }
  ]
  // 余额table规则
  const balanceColumns = [
    {
      title: '收入/支出',
      dataIndex: 'send_or_take_type_str',
      scopedSlots: { customRender: 'send_or_take_type_str' }
    },
    {
      title: '类型',
      dataIndex: 'type_str',
      scopedSlots: { customRender: 'type_str' }
    },
    {
      title: '赠送店铺',
      dataIndex: 'store_name',
      scopedSlots: { customRender: 'store_name' }
    },
    {
      title: '联盟券金额',
      dataIndex: 'league_price',
      sorter: (a, b) => a.league_price - b.league_price
    },
    {
      title: '更改前',
      dataIndex: 'before',
      sorter: (a, b) => a.before - b.before
    },
    {
      title: '更改后',
      dataIndex: 'after',
      sorter: (a, b) => a.after - b.after
    },
    {
      title: '操作时间',
      dataIndex: 'addtime',
      scopedSlots: { customRender: 'addtime' },
      sorter: (a, b) => a.addtime - b.addtime
    },
  ]
  const integralColumns = [
    {
      title: '类型',
      dataIndex: 'type',
      scopedSlots: { customRender: 'type' }
    },
    {
      title: '充值/扣减数额',
      dataIndex: 'amount',
      scopedSlots: { customRender: 'amount' },
      sorter: (a, b) => a.amount - b.amount
    },
    {
      title: '更改前',
      dataIndex: 'before',
      sorter: (a, b) => a.before - b.before
    },
    {
      title: '更改后',
      dataIndex: 'after',
      sorter: (a, b) => a.after - b.after
    },
    {
      title: '操作时间',
      dataIndex: 'created_at',
      scopedSlots: { customRender: 'created_at' },
      sorter: (a, b) => a.created_at - b.created_at
    },
    {
      title: '操作者',
      dataIndex: 'operator'
    },
    {
      title: '说明',
      dataIndex: 'desc'
    }
  ]
  export default {
    name: 'UserDetail',
    components: {
      STable,
      SelectUer
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      modalTitle() {
        switch (this.modalData.type) {
          case 'remark':
            return '请填入备注信息'
  
          case 'money':
            return '充值/扣除余额'
  
          case 'blacklist':
            return '黑名单'
  
          case 'integral':
            return '充值/扣除积分'
  
          case 'grade':
            return '等级设置'
  
          default:
            return '出错了'
        }
      }
    },
    data() {
      return {
        saas_user_id:0,
        exporting: false,
        rechargeVisible: false,
        loading: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {   
          xs: { span: 24 },
          sm: { span: 16 }
        },
        memberCOlumns,
        balanceColumns,
        integralColumns,
        user_id: '',
        modalLoading: false,
        levelList: [],
        // 加载数据方法 必须为 Promise 对象
        loadData: async parameter => {
          try {
            var form = {
              ...parameter,
              saas_user_id: this.saas_user_id,
              type: this.tabIndex
            }
            const res = await getLeagueList(form)
            console.log('getLeagueList', res.data.data)
            this.userData = res.data.details
            console.log(res.data.details)
            console.log(res)
            console.log(456)
            console.log(this.userData)
            // if (res.code != 0) throw res
            // this.userData = res.data.detail

            return res.data
          } catch (error) {
            this.$message.error(error.msg)
           this.$refs.table.localLoading = false
          }
        },
        tabIndex: 2, // 1积分 2余额 3会员
        userData: '',
        modifyShow: false,
        modalData: {
          nickname: null, // 用户名
          parent_id: null, // 上级id
          level: null, // 会员等级
          is_saas_clerk: null, // 是否核销员
          blacklist: null, // 加入黑名单
          contact_way: null, // 联系方式
          total_price: null, // 累计佣金
          price: null, // 可提现佣金
          comments: null // 备注
        },
        value: '',
        userList: [],
        // 积分余额表单
        priceForm: {
          user_id: this.saas_user_id,
          recharge_type: 1,
          type: 2,
          integral: 0,
          money: 0,
          explain: ''
        }
      }
    },
    created() {
      // 根据昵称获取数据
     // this.user_id = JSON.parse(this.$route.query.user_id)
      console.log(111222333)
      console.log(this.$route.query)
      this.saas_user_id = this.$route.query.saas_user_id
    },
    methods: {
      // 修改积分余额
      modifyPrice() {
        this.rechargeVisible = true
      },
      // 积分余额修改提交
      async updateUserRecharge() {
        console.log(123)
        this.modalLoading = true
        try {
          const res = await userLeague({ ...this.priceForm, user_id: this.saas_user_id })
          if (res.code != 0) throw res
          this.$message.success(res.msg)
          this.modalLoading = false
          this.rechargeVisible = false
          this.priceForm = this.$options.data().priceForm
          this.$refs.table.refresh()
        } catch (error) {
          console.log(error)
          console.log(111)
          this.modalLoading = false
        }
      },
      getInfo(id) {
        console.log(id)
        this.modalData.parent_id = id
      },
      onModify() {
        this.modifyShow = true
      },
      // 切换tabs
      clickTab(index) {
        this.tabIndex = index
        this.$refs.table.refresh(true)
      },
      exportJf() {
        this.exporting = true;
        let parameter = {
          _filename: '积分记录.xlsx',
          pageNo: 1,
          pageSize: 100000,
          user_id: this.user_id,
          type: 1,
          export: 1
        };
        expRechargeList(parameter).then(()=>{
          this.exporting = false;
        });
      },
      async modalSumit() {
        try {
          this.modalLoading = true
          const res = await updateUserInfo(this.modalData)
          if (res.code != 0) throw res
          this.$message.success(res.msg)
          this.modalLoading = false
          this.modifyShow = false
          this.$refs.table.refresh()
        } catch (error) {
          this.modalLoading = false
        }
      },
      async remoteMethod(v) {
        this.loading = true
        const res = await getUserList({ type: 'type', name: v })
        this.loading = false
  
        if (res.code != 0) return
        this.userList = res.data.data
      }
    }
  }
  </script>
  
  <style lang="less">
  .user-detail {
    .tabs {
      display: flex;
      margin-top: 20px;
      > span {
        cursor: pointer;
        margin-right: 36px;
        height: 33px;
      }
      .select {
        position: relative;
        color: #1890ff;
        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          height: 2px;
          width: 100%;
          background: #1890ff;
        }
      }
    }
  
    .table-box {
      margin: 34px 24px 0;
      padding: 25px;
      background: #fff;
    }
  }
  .price-box {
    display: flex;
    justify-content: flex-end;
    > div {
      margin-left: 40px;
      text-align: right;
      > div:nth-child(1) {
        line-height: 30px;
        color: rgba(0, 0, 0, 0.45);
      }
      > div:nth-child(2) {
        line-height: 33px;
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
  </style>
  